<template>
    <div class="header">
        <div class="container">
            <BlogHeader />
        </div>
    </div>
    <div class="main">
        <div class="main-container">
            <RouterView />
        </div>
    </div>
</template>

<script lang="ts">
    import { defineComponent } from 'vue';
    import BlogHeader from '@/pages/blog/header.vue';

    export default defineComponent({
        name: 'IndexPage',
        components: { BlogHeader }
    });
</script>

<style scoped>
    .header {
        width: 100%;
        height: 60px;
        background-color: white;
        position: sticky;
        top: 0; /* 元素距离顶部的距离 */
        z-index: 100; /* 可选，用于控制堆叠顺序 */
    }

    .main {
        padding-top: 20px;
        width: 100%;
        background-color: rgb(242, 243, 245);
    }

    .main-container {
        max-width: 1200px;
        min-width: 600px;
        margin: 0 auto;
        display: flex;
        /*子容器高度自适应*/
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .container {
        max-width: 1440px;
        display: flex;
        align-items: center;
        margin: 0 auto;
    }
</style>
